<template>
  <div class="admin-container">
    <!-- 表单 -->
    <div class="loginPane">
      <h1>后台管理系统</h1>
      <el-form :rules="rules" :model="form" label-width="100px" status-icon ref="form" hide-required-asterisk>
        <el-form-item label="账号" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button type="primary" @click="submitForm('form')">登陆</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        password: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入管理ID', trigger: 'blur' },
          { pattern: /^admin$/, message: '管理员用户名错误', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入管理密码', trigger: 'blur' },
          { pattern: /^root$/, message: '管理员密码错误', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit('updateAdminname', this.form.name)
          this.$message('登录成功')
          this.$router.push('/admin')
        } else {
          console.warn('验证失败');//黄色警告
          console.error('验证失败');//红色err
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }

}
</script>

<style lang="scss" scoped>
.admin-container{
  width: 100vw;
  height: 100vh;
  position: relative;
}
@keyframes kenburns-bottom {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 84%;
            transform-origin: 50% 84%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(15px);
            transform: scale(1.25) translateY(15px);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}

.loginPane h1 {
  font-size: 28px;
  color: #000000ce;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 3px 3px #000000ce;
}

.loginPane {
  width: 550px;
  height: 400px;
  background-color: #ffffff0f;
  border-radius: -1px;
  position: absolute;
  top: 30%;
  left: 30%;
  transition: ease all 0.5s;
  box-shadow: 0 5px 10px #4a8cef59;
}
.el-form{
  margin-top: 20px;
  width: 80%;
}
</style>